<template>
    <div>
        <el-dialog :title="selectTitle" :visible.sync="visible" class="show-box" width="40%" >
            <div class="box-select clearfix">
                <div class="clearfix">
                    <div class="left fl">
                        <el-tabs>
                            <el-tab-pane label="最近联系"/>
                            <el-tab-pane label="按拼音选人"/>
                            <el-tab-pane label="按部门选人">
                                <el-tree
                                    class="filter-tree"
                                    :props="defaultProps"
                                    :load="loadNode"
                                    accordion
                                    lazy
                                    ref="tree">
                                    <span class="custom-tree-node" slot-scope="{ node, data }">
                                        <span class="user-box" @click="pickClick(data)" v-if="data.EMPVORGANIZATION_XTYPE==4">
                                            <i class="fa fa-user" v-if="!data.EMPVORGANIZATION_PHOTO"/>
                                            <img class="user-img" v-else :src="data.EMPVORGANIZATION_PHOTO" alt="">
                                            <span class="user-name">{{ node.label }}</span>
                                        </span>
                                        <span v-else>{{ node.label }}</span>
                                    </span>
                                </el-tree>
                            </el-tab-pane>
                        </el-tabs>
                    </div>
                    <div class="right fl">
                        <h3 class="title">已选择成员</h3>
                        <div class="right-select">
                            <ul>
                                <li v-for="(item,index) in selectPeople" :key="index">
                                    <img :src="item.EMPVORGANIZATION_PHOTO" alt="">
                                    <span>{{ item.EMPVORGANIZATION_CNAME }}</span>
                                    <i class="fa fa-times close" @click="delPeopleClick(index)"/>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <div class="btn-box">
                    <el-button>关闭</el-button>
                    <el-button type="primary" @click="subClick">确认</el-button>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import { thequeryTreeSolution, thequeryTreeSolution2, cardformInitData } from '@/api/api'
export default {
    data() {
        return {
            visible: false,
            alldepart: [],
            selectTitle: '选择人员',
            // 波特周写的
            defaultProps: {
                label: 'EMPVORGANIZATION_CNAME',
                isLeaf: 'leaf'
            },
            parms: {
                formId: 3185, params: '%7B%7D', id: 'c0', lv: 0
            },
            // 选择的人员容器
            selectPeople: []
        }
    },
    created() {
        this._queryTreeSolution()
    },
    methods: {
        // 选人
        pickClick(user) {
            const _this = this
            const flag = this.selectPeople.some(item => {
                if (user.EMPVORGANIZATION_ID == item.EMPVORGANIZATION_ID) {
                    return true
                } else {
                    return false
                }
            })
            if (flag) {
                _this.$message({
                    message: '该员工已被选择',
                    type: 'warning'
                })
            } else {
                this.selectPeople.push(user)
            }
        },
        // 删除所选人
        delPeopleClick(index) {
            this.selectPeople.splice(index, 1)
        },
        // 加载部门人员
        loadNode(node, resolve) {
            if (node.level === 0) {
                return resolve(this.alldepart)
            }
            this.parms.id = node.data.EMPVORGANIZATION_ID
            thequeryTreeSolution2(this.parms).then(
                res => {
                    const resp = res
                    resp.map(function(item) {
                        if (item.EMPVORGANIZATION_XTYPE == 4) {
                            item.leaf = true
                            item.children = []
                        }
                    })
                    resolve(resp)
                }
            ).catch(err => { console.log(err) })
        },
        // 打开弹窗
        openToSelect() {
            this.visible = true
        },
        _queryTreeSolution() {
            thequeryTreeSolution(this.parms).then(res => {
                const depart = res
                this.alldepart = depart
            }).catch(err => {
                console.log(err, 'err')
            })
        },
        // 确认选择人员
        subClick() {
            this.visible = false
            this.$emit('select', this.selectPeople)
        }
    }
}
</script>
<style lang="scss" scoped>
    .box-select{
        .btn-box{
            text-align: right;
            margin-top: 10px;
        }
        .left,.right{
            border:1px solid #e7e7e7;
            border-radius: 2px;
            height: 500px;
            overflow: auto;
            .custom-tree-node{
                display: block;
                width: 100%;
            }
            .user-box{
                height: 26px;
                line-height: 26px;
                display: block;
                width: 100%;
            }
            .user-img{
                width: 20px;
                height: 20px;
                border-radius: 50%;
                vertical-align: middle;
            }
            .user-name{
                display: inline-block;
                vertical-align: middle;
            }
            .title{
                font-size: 14px;
                color: #666;
                border-bottom: 1px solid #e7e7e7;
                padding: 10px;
            }
            .right-select{
                padding: 15px;
                ul{
                    li{
                        position: relative;
                        margin-top: 5px;
                        padding: 5px;
                        img{
                            width: 50px;
                            height: 50px;
                            display: inline-block;
                            vertical-align: middle;
                            border-radius: 50%;
                        }
                        span{
                            display: inline-block;
                            vertical-align: middle;
                        }
                        line-height: 50px;
                        border: 1px solid #e7e7e7;
                        border-radius: 2px;
                        .close{
                            position: absolute;
                            right: 10px;
                            top: 50%;
                            transform: translateY(-50%);
                            cursor: pointer;
                        }
                    }
                }
            }
        }
        .left{
            width: 60%;
            padding: 0 10px;
        }
        .right{
            margin-left: 10px;
            width: calc(40% - 10px);
        }
    }
</style>

